<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栏目列表</title>
    <link rel="stylesheet" href="__ADMIN__/vendor/layui/css/layui.css">
    <link rel="stylesheet" href="__ADMIN__/custom/css/style.css">
</head>
<body style="padding:10px 10px;">
<form class="layui-form" action="{:url('category/sort')}" method="post">
<div>
    <a href="{:url('category/add')}" class="layui-btn layui-btn-normal">添加栏目</a>
    <button type="submit" class="layui-btn layui-btn-danger">更新排序</button>
</div>
<table class="layui-table" lay-size="md">
    <colgroup>
        <col width="80">
        <col width="80">
        <col>
        <col width="100">
        <col width="100">
        <col width="200">
    </colgroup>
    <thead>
    <tr style="height: 45px" pid="0">
        <th>伸缩</th>
        <th>ID</th>
        <th>栏目名称</th>
        <th>类型</th>
        <th>排序</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {volist name="cate" id="vo"}
    <tr pid="{$vo.pid}" id="{$vo.id}">
        <td>
            <button class="layui-btn layui-btn-small shensuo" type="button" style="width: 30px;height:30px;">
                <i class="layui-icon">+</i>
            </button>
        </td>
        <td>{$vo.id}</td>
        <td>{$vo.name}</td>
        <td>{$vo.type}</td>
        <td><input type="text" name="{$vo.id}" value="{$vo.sort}" style="width: 70px; height: 25px;" class="layui-input"></td>
        <td><a href="{:url('category/edit',['id'=>$vo['id']])}" class="layui-btn layui-btn-warm layui-btn-mini"><i class="layui-icon">&#xe642;</i>编辑</a><a href="{:url('category/del',['id'=>$vo.id])}" class="layui-btn layui-btn-danger layui-btn-mini del"><i class="layui-icon">&#xe640;</i>删除</a></td>
    </tr>
    {/volist}
    </tbody>
</table>
</form>
<script src="__ADMIN__/vendor/js/jquery.js"></script>
<script src="__ADMIN__/vendor/layui/layui.js"></script>
<script src="__ADMIN__/custom/js/admin.js"></script>
<script>
    layui.use('layer', function(){
        var layer = layui.layer;
        $('.del').on('click',function () {
            var url=$(this).attr('href');
            layer.confirm('确定要删除该栏目吗?', {icon: 3, title:'温馨提示'}, function(index){
                //do something
                location.href=url;
                layer.close(index);
            });
            return false;
        })
    });
    $(function(){
        $(window.parent.document).find('#righttitle').text($('title').text());
        //栏目伸缩
        //1.隐藏非顶级栏目
        $('tr[pid!=0]').hide();
        //2.子栏目展开
        $('.shensuo').on('click',function () {
            //获取按钮状态
            var flag=$(this).find('i').text();
            var index=$(this).parents("tr").attr('id');
            if(flag=="+"){
                //改变按钮状态
                $(this).find('i').text("-");
                //展开子栏目录
                $('tr[pid='+index+']').fadeIn('slow');
            }else{
                $(this).find('i').text("+");
                //收起子栏目
                //$('tr[pid='+index+']').fadeOut('slow');
                hidecate(index);
            }
        });
   });
    //隐藏子栏目 pid 父级分类id,递归隐藏子栏目
    function hidecate(pid) {
        $('tr[pid='+pid+']').each(function () {
            hidecate($(this).attr('id'));
        })
        $('tr[pid='+pid+']').fadeOut('slow');
        $('tr[pid='+pid+']').find('.shensuo').find('i').text("+");

    }
</script>
</body>
</html>